import {TinyPluginFactory} from "./tiny-plugin-factory";
import {Editor} from "tinymce";
import {DomUtil} from "./dom-util";

export class CustomSelection implements TinyPluginFactory {
  creat = function (editor: Editor) {
    tinymce.PluginManager.add('customSelection', function (editor, url) {
      const openDialog = function () {
        // 先让页面焦点处于当前编辑器，否则可能获取的焦点是 body元素，而不是 p 元素
        editor.focus();
        const options = [];
        options.push(DomUtil.createOption("test1", "test1", []));
        options.push(DomUtil.createOption("test2", "test2", []));
        options.push(DomUtil.createOption("test3", "test3", []));
        options.push(DomUtil.createOption("", "", []));
        const select = DomUtil.createSelect("testSelect", options, []);
        const node = editor.selection.getNode();
        const lastChild = node.lastChild;
        if (lastChild.nodeName === 'BR') {
          // 这里在append 之前还要去掉p最开始的br元素，因为空行自带一个 br 元素。要不然总有空行
          lastChild.insertAdjacentElement('beforebegin', select);
          editor.selection.setCursorLocation(lastChild);
        } else {
          // 这里就不用去掉br ，因为有内容，但是这里要在插入构建 的 元素后要额外插入一 个空的 TextNode ,用于将编辑器的光标位于这个空的TextNode处；
          node.append(select);
          const textNode = document.createTextNode("");
          node.append(textNode);
          editor.selection.setCursorLocation(textNode);
        }
      };

// 注册一个工具栏按钮名称
      editor.ui.registry.addButton('customSelection', {
        text: '自定义选择框',
        onAction: function (dialogApi, actionData) {
          openDialog();
        }
      });

// 注册一个菜单项名称 menu/menubar
      editor.ui.registry.addMenuItem('customSelection', {
        text: '自定义选择框',
        onAction: function () {
          openDialog();
        }
      });

      return {
        getMetadata: function () {
          return {
            //插件名和链接会显示在“帮助”→“插件”→“已安装的插件”中
            name: "customSelection",//插件名称
            url: "#", //作者网址
          };
        }
      };
    });
  };

}
